<template>
  <a-spin tip="加载中..." :spinning="spinning">
    <a-card>
      <a-row>
        <a-col :span="8">
          <a-tree
            v-if="treeData"
            :replaceFields="{
              children: 'children',
              title: 'name',
              key: 'id',
              pid:'pid'
            }"
            :tree-data="treeData"
            @select="onSelect"
          >
          </a-tree>
        </a-col>
        <a-col :span="16">
          <div class="table-page-search-wrapper">
            <a-row>
              <a-col :md="8" :sm="24">
                <a-form layout="inline">
                  <a-form-item label="姓名">
                    <a-input   style="width: 200px;" placeholder="请输入姓名" v-model="queryParam.username" />
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-button class="btn_primary_color accept_more_operate_right_submit" type="primary" @click="onQuery">
                  查询
                </a-button>
                <a-button class="btn_normal_color accept_more_operate_right_reset" type="primary" @click="onReset">
                  重置
                </a-button>
              </a-col>
              <a-col :md="8" :sm="24"/>
            </a-row>
          </div>
          <a-table
            v-if="listData"
            :scroll="{ x: 800, y: 550 }"
            :columns="ucolumns"
            :data-source="listData"
            :pagination="false"
            :loading="loading"
            :bordered="ubordered"
            size="middle"
            ref="table"
          >

            <span slot="serial" slot-scope="text, record, index">
              {{ parseInt(index) + 1 }}
            </span>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </a-spin>
</template>

<script>
import { queryBaseOrgUserByUser, queryBaseOrgTree } from '@/api/ding/di_rel_dept_correct.js'

const ucolumns = [
  {
    title: '序号',
    width: 100,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '组织名称',
    dataIndex: 'orgname',
    key: 'orgname',
    align: 'left',
    width: 250
  },
  {
    title: '名称',
    dataIndex: 'username',
    key: 'username',
    align: 'left',
    width: 150
  },
  {
    title: '联系号码',
    dataIndex: 'mobile',
    key: 'mobile',
    align: 'left',
    width: 100
  },
  {
    title: '性别',
    dataIndex: 'sextext',
    key: 'sextext',
    align: 'left',
    width: 100
  },
  {
    title: '岗位级别',
    dataIndex: 'careerranktext',
    key: 'careerranktext',
    align: 'left',
    width: 250
  }
]

export default {
  data () {
    return {
      ubordered: true,//是否有边框
      spinning: false, // 查询条件是否展开
      loading: false, // 查询加载框
      treeData: [],
      ucolumns: ucolumns,
      listData: [],
      selectedNode: { id: '', name: '', pid: '' },//选中的节点
      queryParam: {
        orgid: '',
        username: ''
      }
    }
  },
  async created () {
    this.spinning = true
    this.loading = true
    const res1 = await queryBaseOrgUserByUser({ username: '' }).finally(() => {
      this.spinning = false
    })
    if (res1.code == 0) {
      this.listData = res1.data
    } else {
      this.$message.error('查询错误')
    }

    const res2 = await queryBaseOrgTree().finally(() => {
      this.loading = false
    })
    if (res2.code == 0) {
      this.treeData = res2.data
    } else {
      this.$message.error('查询错误')
    }
  },
  methods: {
    //树选择事件
    onSelect (ks, data) {
      if (data.selectedNodes && data.selectedNodes.length > 0) {
        console.log('wwwwwww')
        //封装数据
        this.selectedNode.id = data.selectedNodes[0].data.props.id
        this.selectedNode.name = data.selectedNodes[0].data.props.name
        this.selectedNode.pid = data.selectedNodes[0].data.props.pid
        if (this.selectedNode.pid && this.selectedNode.pid.length > 0) {
          this.queryParam.orgid = this.selectedNode.pid
        } else {
          this.queryParam.orgid = this.selectedNode.id
        }
        this.refreshQuery()
      } else {
        this.queryParam.orgid = ''
        this.refreshQuery()
      }
    },
    refreshQuery () {
      queryBaseOrgUserByUser(this.queryParam).then((res) => {
        if (res.code === 0) {
          this.listData = []
          this.listData = res.data
        }
      })
    },
    onQuery () {
      this.loading = true
      queryBaseOrgUserByUser(this.queryParam).then((res) => {
        if (res.code === 0) {
          this.listData = []
          this.listData = res.data
          this.loading = false
        }
      })
    },
    onReset () {
      this.queryParam.orgid = ''
      this.queryParam.username = ''
      this.onQuery()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
